<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>授权App</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/static/layuiadmin/layui/css/layui.css" media="all">
</head>
<body>

<div class="layui-form" lay-filter="layuiadmin-form-role" id="layuiadmin-form-role" style="padding: 20px 30px 0 0;">
    <div class="layui-form-mid layui-word-aux" style="margin-left: 110px;">{$msg}</div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <input type="hidden" name="id" value="{$manager.id}">
            <input type="hidden" id="quick_ids" name="quick_ids" value="">
            <div id="empwoer" class="demo-transfer"></div>
        </div>
    </div>

    <div class="layui-form-item layui-hide">
        <button class="layui-btn" lay-submit lay-filter="LAY-user-role-submit" id="LAY-user-role-submit">提交</button>
    </div>
</div>
<script src="/static/layuiadmin/layui/layui.js"></script>
<script>
    layui.config({
        base: '/static/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'form','transfer'], function(){
        var $ = layui.$
            ,form = layui.form
            ,transfer = layui.transfer;


        //模拟数据
        var allQas = '{$allQas}';
        var haveQas = '{$haveQas}';
        var all = JSON.parse(HTMLDecode(allQas));
        var have = JSON.parse(HTMLDecode(haveQas));
        $("#quick_ids").val(have);

        //定义标题及数据源
        transfer.render({
            elem: '#empwoer'
            , showSearch: true
            , title: ['所有App', '授权App']  //自定义标题
            , data: all
            , width: 156 //定义宽度
            , height: 350 //定义高度
            , value: have
            , onchange: function (obj, index) {
                var quick_ids = $("#quick_ids").val();
                if (index === 0) {
                    var str = '';
                    for (let i = 0; i < obj.length; i++) {
                        if (i === 0) {
                            str = obj[i]['value'];
                        } else {
                            str += ',' + obj[i]['value'];
                        }
                    }
                    if (!quick_ids) {
                        $("#quick_ids").val(str);
                    } else {
                        $("#quick_ids").val(quick_ids + ',' + str);
                    }
                } else {
                    var idArr = quick_ids.split(',');
                    for (let i = 0; i < idArr.length; i++) {
                        idArr[i] = parseInt(idArr[i]);
                    }
                    console.log(idArr);
                    for (let i = 0; i < obj.length; i++) {
                        let index = idArr.indexOf(obj[i]['value']);
                        console.log("查询："+obj[i]['value']);
                        console.log("下标："+index);
                        if (index !== -1) {
                            idArr.splice(index, 1);
                        }
                    }
                    $("#quick_ids").val(idArr.join());//"1,2,3,4,5,6"
                }
            }
        })

        function HTMLDecode(text) {
            var temp = document.createElement("em");
            temp.innerHTML = text;
            var output = temp.innerText || temp.textContent;
            temp = null;
            return output;
        }
    })

</script>
</body>
</html>